<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <label style="margin-right:5px">员工姓名：</label>
        <el-input v-model="name" placeholder="请输入员工姓名" style="width:15%"/>
        <el-button type="primary" style="margin-left: 20px" @click="pageQuery()">查询</el-button>
        <el-button type="primary" style="float:right" @click="handleAddEmp()">+添加员工</el-button>
      </div>
      <div>
        <el-table
          :data="records"
          stripe
          style="width: 100%">
          <el-table-column
            prop="name"
            label="员工姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="username"
            label="账号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号">
          </el-table-column>
          <el-table-column
            prop="status"
            label="账号状态">
            <template slot-scope="scope">{{scope.row.status===0?"禁用":"启用"}}</template>
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="最后操作时间">
          </el-table-column>
          <el-table-column label="操作">
          <template slot-scope="scope">  <!--  scope.row 代表当前行的数据-->
              <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
              <el-button type="text" @click="handleStartOrStop(scope.row)">{{scope.row.status===0?"启用":"禁用"}}</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <el-pagination
        class="pageList"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import {getEmployeeList,enableOrDisableEmployee} from '@/api/employee'

export default  {
  data() {
    return {
      name: '', //员工姓名
      page: 1, //当前页数
      pageSize: 10, //每页显示条数
      total: 0, //总条数
      records: [], //员工列表
    }
  },
  created() {
    this.pageQuery()
  },
  methods: {
    //分页查询
    pageQuery() {
      const params = { name: this.name, page: this.page, pageSize: this.pageSize }
      //发送ajax请求
      getEmployeeList(params).then(res => {
        if (res.data.code === 1) {
          this.total = res.data.data.total
          this.records = res.data.data.records
        }
      }).catch(err => {
        this.$message.error('请求失败' + err.message)
      })
    },
    //pageSize 改变时触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageQuery()
    },
    //page 改变时触发
    handleCurrentChange(page) {
      this.page = page
      this.pageQuery()
    },
    //启用/禁用员工
    handleStartOrStop(row) {
      //弹出确认框
      this.$confirm("确定要修改员工状态吗？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = { id: row.id, status: !row.status ? 1 : 0 }
        //发送ajax请求
        enableOrDisableEmployee(params).then(res => {
          if (res.data.code === 1) {
            this.$message.success('员工状态修改成功')
            this.pageQuery()
          } else {
            this.$message.error('操作失败' + res.data.message)
          }
        })
      })

    },
    //添加员工
    handleAddEmp() {
      this.$router.push('/employee/add')
    },
    //修改员工
    handleEdit(row) {
      if(row.username === 'admin'){
        this.$message.error('不能修改admin账号')
        return
      }
      //跳转到修改页面,并将当前id传递给修改页面
      this.$router.push({ path: '/employee/add', query: { id: row.id } })
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled-text {
  color: #bac0cd !important;
}
</style>
